<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Item - Dividers</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Item Divider</ion-title>
        </ion-toolbar>
      </ion-header>


      <ion-content id="content" class="outer-content">
        <ion-item-divider>
          <ion-label>
            Divider by itself
          </ion-label>
        </ion-item-divider>

        <ion-list>
          <ion-item-divider>
            <ion-label>
              Divider in List
            </ion-label>
          </ion-item-divider>

          <ion-item-divider color="danger">
            <ion-label>
              Danger Divider in List
            </ion-label>
          </ion-item-divider>
        </ion-list>

        <ion-item-group>
          <ion-item-divider>
            <ion-label>
              Divider in Item Group
            </ion-label>
          </ion-item-divider>
          <ion-item-divider color="secondary">
            <ion-label>
              Secondary Divider in Item Group
            </ion-label>
          </ion-item-divider>
        </ion-item-group>

        <ion-item-group>
          <ion-item>
            <ion-label>
              <ion-text color="secondary"><h3>Secondary header</h3></ion-text>
              Plain Ol' div with some text
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider>
            <ion-label>
              Item Divider
              <ion-text color="danger">
                Danger Span
              </ion-text>
            </ion-label>
            <ion-button slot="end">button</ion-button>
          </ion-item-divider>

          <ion-item text-wrap class="custom-item">
            <ion-label>
              Multiline text that should wrap when it is too long
              to fit on one line in the item. Attribute on .item
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="dark">
            <ion-button slot="start" fill="clear">
              <ion-icon slot="icon-only" name="cloudy"></ion-icon>
            </ion-button>
            <ion-button slot="start" fill="clear" color="light">
              <ion-icon slot="icon-only" name="rainy"></ion-icon>
            </ion-button>

            <ion-label>
              Dark
              <ion-text color="primary">
                <h5>Primary h5</h5>
              </ion-text>
            </ion-label>
          </ion-item-divider>

          <ion-item text-wrap>
            <ion-label>
              <h1>H1 Title Text</h1>
            </ion-label>
          </ion-item>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="light">
            <ion-avatar slot="start">
              <img src="">
            </ion-avatar>
            <ion-label>Light</ion-label>
            <ion-button slot="end" fill="clear" color="danger">
              <ion-icon name="sunny"></ion-icon>
            </ion-button>
          </ion-item-divider>

          <ion-item-divider color="primary">
            <ion-label>Primary</ion-label>
            <ion-thumbnail slot="end">
              <img src="">
            </ion-thumbnail>
          </ion-item-divider>
        </ion-item-group>

        <ion-item-group>
          <ion-item-divider color="secondary">Secondary</ion-item-divider>

          <ion-item>
            <ion-label>
              Column 1
            </ion-label>
            <ion-label>
              Column 2
            </ion-label>
            <ion-label>
              Column 3
            </ion-label>
          </ion-item>
        </ion-item-group>
      </ion-content>

      <style>
        img {
          height: 100px;
        }
      </style>

  </ion-app>
</body>

</html>
